// JavaScript Document
/**
 * 关闭模态框时清空数据
 */
$(".modal fade").on('hidden.bs.modal', function () {
    $("#updateDatum").reset();
});

/**
 * 备注编辑框
 */
$(function(){
	/*鼠标点击显示编辑框*/
	$('.text-introduction').click(function(){
		var td=$(this); //为后面文本框变成文本铺垫
		var text=$(this).text();
		var input=$('<input type="text" class="edit-introduction" value="'+text+'">');
		$(this).html( input );
		$('.edit-introduction').click(function(){
			return false;
		}); //阻止表单默认点击行为
		$('.edit-introduction').select(); //点击自动全选中表单的内容
		$('.edit-introduction').blur(function(){
			var nextxt = $(this).val();
			if(nextxt == text){
                td.html(text);
                return false;
			}
			if(nextxt==''){
                $.ajax({
                    url:"updateRemark",
                    method:'post',
                    contentType:"application/json;charset=UTF-8",
                    data:JSON.stringify({
                        "remark" : nextxt,
                    }),
                    dataType:'json',
                    success:function(data){
                        if(data.SUCCESS == 1){
                            td.css("color", "rgba(244,244,244,0.7)");
                            td.html("点击编辑备注");
                        }
                    },
                    error:function(err){
                        layer.msg("修改失败");
                        td.html(text);
                    }
                });
			}else{
                $.ajax({
                    url:"updateRemark",
                    method:'post',
                    contentType:"application/json;charset=UTF-8",
                    data:JSON.stringify({
                        "remark" : nextxt
                    }),
                    dataType:'json',
                    success:function(data){
                        if(data.SUCCESS == 1)
                            td.html(nextxt);
                    },
                    error:function(err){
                        layer.msg("修改失败");
                        td.html(text);
                    }
                });
			}
		}); //表单失去焦点文本框变成文本
	});	
	/*鼠标划过显示*/
	$('.text-introduction').hover(function(){
		$(this).css("border","1px rgba(244,244,244,0.4) solid");
		$(this).css("background","rgba(244,244,244,0.1)");
	},function(){
		$(this).css("border","1px rgba(244,244,244,0.0) solid");
		$(this).css("background","rgba(244,244,244,0.0)");
	});
});

/**
 * 更新省份对应的城市
 */
function updateCity(){
    var province = $('#province').val();
    $.ajax({
        url: "updateCity",
        method:'post',
        contentType:"application/x-www-form-urlencoded;charset=utf-8",
        data:"province=" + province,
        dataType:'json',
        success:function(data){
            var list = data.cityList;
            $("#city option").remove();
            for(var i=0;i<list.length;i++){
                var html = "<option value='" + list[i] + "'>" + list[i] + "</option>";
                $("#city").append(html);
            }
        },
        error:function(err){
            layer.msg("请求回调失败");
        }
    });
}
$(function(){
    var province = $("#province").val();
    var city = $("#city").val();
    if(province !=null || province != ''){
        $.ajax({
            url: "updateCity",
            method:'post',
            contentType:"application/x-www-form-urlencoded;charset=utf-8",
            data:"province=" + province,
            dataType:'json',
            success:function(data){
                var list = data.cityList;
                $("#city option").remove();
                for(var i=0;i<list.length;i++){
                    var html = "<option value='" + list[i] + "' >" + list[i] + "</option>";
                    $("#city").append(html);
                }
                $("#city").val(city);
            },
            error:function(err){
                layer.msg("请求回调失败");
            }
        });
    }
});


/**
 * 修改用户基本信息
 */
$(function(){
  $('#updateUserDatum').on('click', function(){
      $(this).attr('disabled', 'disabled');
      var targetURI =  $("#userDatum").attr("action");
      var requestData = $("#userDatum").serialize();
      $.ajax({
          url:targetURI,
          method:'post',
          cache:false,
          data:requestData,
          dataType:'json',
          success:function (data) {
              layer.msg(data.SUCCESS);
              setTimeout(function(){
                  document.location.reload(); //重载当前页面
              },2000);
          },
          error:function (err) {
              layer.msg("请求回调失败");
          }
      });
  });
})

/**
 * 点击选择图片
 */
function clickImg() {
    document.getElementById('selectImg').click();
}
/**
 * 选择图片触发cropper
 */
function selectImg(file) {
    if(!file.files || !file.files[0]){
        return
    }
    $('#selectImg-box').toggle();
    $('#backImg').show();
    $('#saveImg').show();
    $('#tailoring-box').toggle();
    var reader = new FileReader();
    reader.onload = function(evt) {
        var replaceSrc = evt.target.result;
        // 更换cropper的图片
        $('#processImage').cropper('replace', replaceSrc, false);// 默认false，适应高度，不失真
    }
    reader.readAsDataURL(file.files[0]);
}
/**
 * 页面dom节点加载完毕后执行
 */
$(function(){
    /**
     * 初始化选择的图片
     */
    $('#processImage').cropper({//这里是给img 即被裁剪的图片进行参数配置
        aspectRatio: 1,// 默认比例
        preview : '.previewImage',// 预览视图
        guides : true, // 裁剪框的虚线(九宫格)
        viewMode : 2, // 限制裁剪框视图大小
        center : true, // 裁剪框在图片正中心
        background : true, // 显示容器的网格背景(马赛克)
        autoCropArea : 0.8, // 0-1之间的数值，定义自动剪裁区域的大小，默认0.8
        movable : false, // 是否允许移动图片
        dragMode : 'move', // 拖拽模式
        dragCrop : false, // 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
        movable : true, // 是否允许移动剪裁框
        resizable : true, // 是否允许改变裁剪框的大小
        zoomable : true, // 是否允许缩放图片大小
        zoomOnWheel : false, // 是否允许通过鼠标来缩放图片
        mouseWheelZoom : false, // 是否允许通过鼠标滚轮来缩放图片
        touchDragZoom : false, // 是否允许通过触摸移动来缩放图片
        rotatable : true, // 是否允许旋转图片
        minCropBoxWidth : 130, // 裁剪层的最小宽度
        minCanvasHeight : 130, // 裁剪层的最小高度
        minCanvasWidth : 350, // canvas的最小宽度
        minCanvasHeight : 350, // canvas的最小高度
        crop : function(e) {
            //data是 x,y width, height rotate scaleX scaleY裁剪框的坐标，以及裁剪出来的图片长宽 旋转角度 缩放等
            $('#x').val(data.x);
            $('#y').val(data.y);
            console.log(data)
            //console.log('w'+data.width+'   height'+data.height);
        },
        //这几个回调函数
        build: function (e) { //是图片绘制到cropper自动生成的canvas的开始   加载开始
            //过渡效果
        },
        built: function (e) { //加载完成  绘制完成 获取到相应的data

        }
    });
    //放大图片
    $('#magnify').click(function(){
        $("#processImage").cropper('zoom', 0.1);
    })
    //缩小图片
    $('#shrink').click(function(){
        $('#processImage').cropper('zoom', -0.1);
    })
    //重置图片
    $('#reset').click(function(){
        $('#processImage').cropper('reset');
    })
    //返回上一步重新选择图片
    $('#backImg').on('click', function(){
        $('#backImg').hide();
        $('#saveImg').hide();
        $('#selectImg-box').toggle();
        $('#tailoring-box').toggle();
    })
    //保存图片
    $("#saveImg").on("click",function(){
        var canvas = $('#processImage').cropper('getCroppedCanvas');// 获取被裁剪后的canvas
        var base64 = canvas.toDataURL('image/jpeg'); // 转换为base64
        var encodeBase64 = encodeURIComponent(base64);
        console.log(encodeBase64);
        uploadHeaderImg(encodeBase64);
    })
    //关闭模态框
    $("#headerImage").on('hidden.bs.modal', function(){
        $('#backImg').hide();
        $('#saveImg').hide();
        $('#selectImg-box').show();
        $('#tailoring-box').hide();
        $('#selectImg').val("");
    })
});

/**
 * 上传头像
 */
function uploadHeaderImg(encodeBase64) {
    $.ajax({
        url:'uploadHeaderImg',
        method:'post',
        data:'headerImg=' + encodeBase64,
        dataType:'json',
        cache:false,
        async:true,
        success:function(data){
            document.location.reload(); // 重载当前页面
        },
        error:function(err){
            layer.msg("请求回调失败");
        }
    });
}


